<template>
    <div>
        <div>
            <el-form ref="searchForm" :inline="true" :model="condition.search" label-suffix="" label-width="100px"
                     label-position="left" :size="size">
                <el-row>
                    <el-col :span=6>
                        <el-form-item label="消息类型" prop="msgType">
                            <el-select v-model="condition.search.msgType"
                                       placeholder="消息类型">
                                <el-option label="小视频"
                                           value="SHORTVIDEO"></el-option>
                                <el-option label="地理位置"
                                           value="LOCATION"></el-option>
                                <el-option label="语音"
                                           value="VOICE"></el-option>
                                <el-option label="图片"
                                           value="IMAGE"></el-option>
                                <el-option label="视频"
                                           value="VIDEO"></el-option>
                                <el-option label="链接"
                                           value="LINK"></el-option>
                                <el-option label="文本"
                                           value="TEXT"></el-option>
                                <el-option label="事件"
                                           value="EVENT"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="文本模式" prop="textMode">
                            <el-select v-model="condition.search.textMode"
                                       placeholder="文本模式">
                                <el-option label="全匹配"
                                           value="EQUAL"></el-option>
                                <el-option label="包含匹配"
                                           value="CONTAIN"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="事件类型" prop="eventType">
                            <el-select v-model="condition.search.eventType"
                                       placeholder="事件类型">
                                <el-option label="关注"
                                           value="SUBSCRIBE"></el-option>
                                <el-option label="扫描"
                                           value="SCAN"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="事件KEY值" prop="eventKey">
                            <el-input v-model="condition.search.eventKey"
                                      placeholder="事件KEY值"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span=6>
                        <el-form-item label="回复方法" prop="replyMethod">
                            <el-select v-model="condition.search.replyMethod"
                                       placeholder="回复方法">
                                <el-option label="被动响应回复"
                                           value="RESPONSE"></el-option>
                                <el-option label="客服消息回复"
                                           value="CUSTOM"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="回复类型" prop="replyType">
                            <el-select v-model="condition.search.replyType"
                                       placeholder="回复类型">
                                <el-option label="系统预设"
                                           value="SYSTEM"></el-option>
                                <el-option label="文本"
                                           value="TEXT"></el-option>
                                <el-option label="图片"
                                           value="IMAGE"></el-option>
                                <el-option label="卡券"
                                           value="CARD"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item>
                            <el-button type="primary" @click="getData">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="reset">重置</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" @click="addKeyword">新增关键词回复</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" @click="addSubscribe">新增关注回复</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-table
            :size="size"
            id="mainTable"
            :data="tableData"
            header-cell-class-name="tableHeaderStyle"
            :row-class-name="tableRowClassName">
            <el-table-column label="序号" width="60">
                <template v-slot="scope">
                    <span>{{ (condition.page - 1) * condition.rows + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="msgType"
                :formatter="formatMsgType"
                width="80px"
                label="消息类型">
            </el-table-column>
            <el-table-column
                prop="textKeyword"
                width="80px"
                label="文本关键词">
            </el-table-column>
            <el-table-column
                prop="textMode"
                :formatter="formatTextMode"
                width="80px"
                label="文本模式">
            </el-table-column>
            <el-table-column
                prop="eventType"
                :formatter="formatEventType"
                width="80px"
                label="事件类型">
            </el-table-column>
            <el-table-column
                prop="eventKey"
                width="80px"
                label="事件KEY值">
            </el-table-column>
            <el-table-column
                prop="replyMethod"
                :formatter="formatReplyMethod"
                width="100px"
                label="回复方法">
            </el-table-column>
            <el-table-column
                prop="replyType"
                :formatter="formatReplyType"
                width="80px"
                label="回复类型">
            </el-table-column>
            <el-table-column
                prop="replyMaterialId"
                width="400px"
                label="回复素材">
                <template v-slot="scope">
                    <mp-material-show :id="scope.row.replyMaterialId"></mp-material-show>
                </template>
            </el-table-column>
            <el-table-column
                prop="updateTime"
                label="更新时间">
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
                align="center"
                width="60px">
                <template v-slot="scope">
                    <div>
                        <el-button @click="onDelete(scope.row)" type="text" size="small">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            small
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="condition.page"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size.sync="condition.rows"
            layout="sizes, prev, pager, next"
            :total.sync="condition.total">
        </el-pagination>
        <el-dialog :title="addOrUpdateDialogTitle" width="30%" :visible.sync="addOrUpdateDialogVisible">
            <el-form :model="addOrUpdateForm" label-width="120px" :size="size">
                <el-form-item label="消息类型">
                    <el-select v-model="addOrUpdateForm.msgType"
                               placeholder="消息类型">
                        <el-option label="小视频"
                                   value="SHORTVIDEO"></el-option>
                        <el-option label="地理位置"
                                   value="LOCATION"></el-option>
                        <el-option label="语音"
                                   value="VOICE"></el-option>
                        <el-option label="图片"
                                   value="IMAGE"></el-option>
                        <el-option label="视频"
                                   value="VIDEO"></el-option>
                        <el-option label="链接"
                                   value="LINK"></el-option>
                        <el-option label="文本"
                                   value="TEXT"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="文本关键词">
                    <el-input v-model="addOrUpdateForm.textKeyword"
                              placeholder="文本关键词"></el-input>
                </el-form-item>
                <el-form-item label="文本模式">
                    <el-select v-model="addOrUpdateForm.textMode"
                               placeholder="文本模式">
                        <el-option label="全匹配"
                                   value="EQUAL"></el-option>
                        <el-option label="包含匹配"
                                   value="CONTAIN"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="事件类型">
                    <el-select v-model="addOrUpdateForm.eventType"
                               placeholder="事件类型">
                        <el-option label="关注"
                                   value="SUBSCRIBE"></el-option>
                        <el-option label="扫描"
                                   value="SCAN"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="事件KEY值">
                    <el-input v-model="addOrUpdateForm.eventKey"
                              placeholder="事件KEY值"></el-input>
                </el-form-item>
                <el-form-item label="回复方法">
                    <el-select v-model="addOrUpdateForm.replyMethod"
                               placeholder="回复方法">
                        <el-option label="被动响应回复"
                                   value="RESPONSE"></el-option>
                        <el-option label="客服消息回复"
                                   value="CUSTOM"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="回复类型">
                    <el-select v-model="addOrUpdateForm.replyType"
                               placeholder="回复类型">
                        <el-option label="系统预设"
                                   value="SYSTEM"></el-option>
                        <el-option label="文本"
                                   value="TEXT"></el-option>
                        <el-option label="图片"
                                   value="IMAGE"></el-option>
                        <el-option label="卡券"
                                   value="CARD"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addOrUpdateDialogVisible = false" :size="size">取 消</el-button>
                <el-button @click="addOrUpdateConfirm" type="primary" :size="size">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="关键词回复" width="30%" :visible.sync="keywordDialogVisible">
            <el-form :model="addOrUpdateForm" label-width="120px" :size="size">
                <el-form-item label="关键词">
                    <el-input v-model="addOrUpdateForm.textKeyword"
                              placeholder="文本关键词"></el-input>
                </el-form-item>
                <el-form-item label="匹配模式">
                    <el-select v-model="addOrUpdateForm.textMode"
                               placeholder="匹配模式">
                        <el-option label="全匹配"
                                   value="EQUAL"></el-option>
                        <el-option label="包含匹配"
                                   value="CONTAIN"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="回复方法">
                    <el-select v-model="addOrUpdateForm.replyMethod"
                               placeholder="回复方法">
                        <el-option label="被动响应回复"
                                   value="RESPONSE"></el-option>
                        <el-option label="客服消息回复"
                                   value="CUSTOM"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择素材">
                    <el-button @click="materialDialogVisible = true" :size="size">
                        点击选择
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <mp-material-show :info="selectedMaterialInfo"></mp-material-show>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="keywordDialogVisible = false" :size="size">取 消</el-button>
                <el-button @click="addKeywordConfirm" type="primary" :size="size">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="关注回复" width="30%" :visible.sync="subscribeDialogVisible">
            <el-form :model="addOrUpdateForm" label-width="120px" :size="size">
                <el-form-item label="回复方法">
                    <el-select v-model="addOrUpdateForm.replyMethod"
                               placeholder="回复方法">
                        <el-option label="被动响应回复"
                                   value="RESPONSE"></el-option>
                        <el-option label="客服消息回复"
                                   value="CUSTOM"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择素材">
                    <el-button @click="materialDialogVisible = true" :size="size">
                        点击选择
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <mp-material-show :info="selectedMaterialInfo"></mp-material-show>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="subscribeDialogVisible = false" :size="size">取 消</el-button>
                <el-button @click="addSubscribeConfirm" type="primary" :size="size">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="选择素材" width="50%" :visible.sync="materialDialogVisible" append-to-body>
            <mp-material :mp-id="this.mpId" size="small" mode="select" @select="selectMaterialConfirm"></mp-material>
            <div slot="footer" class="dialog-footer">
                <el-button @click="materialDialogVisible = false" :size="size">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {addMpMessageReply, deleteMpMessageReply, getMpMessageReplyByPage, updateMpMessageReply} from '@/api/api'
import MpMaterial from "@/component/MpMaterial";
import MpMaterialShow from "@/component/single/MpMaterialShow";

export default {
    name: "mp-message-reply",
    components: {MpMaterial, MpMaterialShow},
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 10,
                total: 0,
                search: {}
            },
            // 表格数据
            tableData: [],
            // 新增或者编辑对话框显示
            addOrUpdateDialogVisible: false,
            // 标题
            addOrUpdateDialogTitle: '新增',
            // 新增或者编辑对话框表单
            addOrUpdateForm: {},
            // 选中行
            selectedRow: {},

            keywordDialogVisible: false,
            subscribeDialogVisible: false,

            materialDialogVisible: false,
            selectedMaterialInfo: {},
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        mpId: String,
        size: {
            type: String,
            default: 'small'
        },
    },
    methods: {
        selectMaterialConfirm(row) {
            this.selectedMaterialInfo = row;
            this.materialDialogVisible = false;
        },
        addKeyword() {
            this.addOrUpdateForm = {};
            this.keywordDialogVisible = true;
        },
        addKeywordConfirm() {
            this.addOrUpdateForm.mpId = this.mpId;
            this.addOrUpdateForm.msgType = 'TEXT';
            this.addOrUpdateForm.replyMaterialId = this.selectedMaterialInfo.id;
            this.add();
            this.keywordDialogVisible = false;
        },
        addSubscribe() {
            this.addOrUpdateForm = {};
            this.subscribeDialogVisible = true;
        },
        addSubscribeConfirm() {
            this.addOrUpdateForm.mpId = this.mpId;
            this.addOrUpdateForm.msgType = 'EVENT';
            this.addOrUpdateForm.eventType = 'SUBSCRIBE'
            this.addOrUpdateForm.replyMaterialId = this.selectedMaterialInfo.id;
            this.add();
            this.subscribeDialogVisible = false;
        },
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        // 格式布尔值
        formatBoolean: function (row, column, cellValue) {
            if (cellValue) {
                return "是";
            } else {
                return "否";
            }
        },
        formatMsgType: function (row, column, cellValue) {
            if (!cellValue) {
                return "";
            }
            if (cellValue == 'SHORTVIDEO') {
                return "小视频";
            } else if (cellValue == 'LOCATION') {
                return "地理位置";
            } else if (cellValue == 'VOICE') {
                return "语音";
            } else if (cellValue == 'IMAGE') {
                return "图片";
            } else if (cellValue == 'VIDEO') {
                return "视频";
            } else if (cellValue == 'LINK') {
                return "链接";
            } else if (cellValue == 'TEXT') {
                return "文本";
            } else if (cellValue == 'EVENT') {
                return "事件";
            } else {
                return "未知";
            }
        },
        formatTextMode: function (row, column, cellValue) {
            if (!cellValue) {
                return "";
            }
            if (cellValue == 'EQUAL') {
                return "全匹配";
            } else if (cellValue == 'CONTAIN') {
                return "包含匹配";
            } else {
                return "未知";
            }
        },
        formatEventType: function (row, column, cellValue) {
            if (!cellValue) {
                return "";
            }
            if (cellValue == 'SUBSCRIBE') {
                return "关注";
            } else if (cellValue == 'SCAN') {
                return "扫描";
            } else {
                return "未知";
            }
        },
        formatReplyMethod: function (row, column, cellValue) {
            if (!cellValue) {
                return "";
            }
            if (cellValue == 'RESPONSE') {
                return "被动响应回复";
            } else if (cellValue == 'CUSTOM') {
                return "客服消息回复";
            } else {
                return "未知";
            }
        },
        formatReplyType: function (row, column, cellValue) {
            if (!cellValue) {
                return "";
            }
            if (cellValue == 'SYSTEM') {
                return "系统预设";
            } else if (cellValue == 'TEXT') {
                return "文本";
            } else if (cellValue == 'IMAGE') {
                return "图片";
            } else if (cellValue == 'CARD') {
                return "卡券";
            } else {
                return "未知";
            }
        },
        showAddDialog: function () {
            this.addOrUpdateDialogTitle = '新增';
            this.addOrUpdateDialogVisible = true;
            this.addOrUpdateForm = {};
        },
        showUpdateDialog: function (row) {
            this.addOrUpdateDialogTitle = '编辑';
            this.addOrUpdateDialogVisible = true;
            this.selectedRow = row;
            // 深拷贝
            this.addOrUpdateForm = Object.assign({}, row);
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        exportExcel: function () {
            this.GLOBAL.exportExcel('#mainTable', '数据.xlsx');
        },
        add: function () {
            addMpMessageReply(this.addOrUpdateForm).then(data => {
                this.addOrUpdateDialogVisible = false;
                this.getData();
            });
        },
        update: function () {
            updateMpMessageReply(this.addOrUpdateForm).then(data => {
                this.addOrUpdateDialogVisible = false;
                this.getData();
            });
        },
        onDelete: function (row) {
            this.$confirm('请确认是否删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteMpMessageReply({id: row.id}).then(data => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        addOrUpdateConfirm: function () {
            if (this.addOrUpdateDialogTitle == '新增') {
                this.add();
            } else if (this.addOrUpdateDialogTitle == '编辑') {
                this.update();
            }
        },
        // 获取表格数据
        getData: function () {
            this.condition.search.mpId = this.mpId;
            getMpMessageReplyByPage(this.condition).then(data => {
                this.tableData = data.body.rows;
                this.condition.total = data.body.total;
            });
        },
    },
    created() {
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
